<template>
  <div>
    <el-dialog title="生成销货清单" :visible="ayncVisible" @close="ayncVisible = false" width="70%">

      <div style="margin-bottom: 20px;">
        <el-row style="display: flex;">

          <!-- <div style="display: flex;align-items: center;"><span>出库日期：</span>
            <el-date-picker
              size="small"
              v-model="ayncTime"
              style="width: 250px;"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker></div> -->
          <div style="margin-left: 20px;display: flex;align-items: center;"><span> 发票日期：</span>
            <el-date-picker size="small" style="width: 250px;" v-model="kpTime" type="daterange"
              start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
          <div style="margin-left: 20px;vertical-align: middle;">
            <el-radio-group @change="() => { ayncPagination.page = 1}" v-model="selectType">
              <el-radio v-for="item in selectTypeList" :key="item.value" :label="item.value">{{item.label}}</el-radio>
            </el-radio-group>
          </div>
          <div style="margin-left: 20px;display: flex;align-items: center;">
            <el-input size="small" style="width: 250px;" v-model="qryWord" placeholder="请输入客户名称/编码/发票编号">
            </el-input>
          </div>
          <div> <el-button size="small" type="primary" style="margin-left: 12px;" @click="serach()">查询</el-button></div>

        </el-row>

      </div>
      <el-table highlight-selection-row border :cell-class-name="()=>'ellipsis'" :row-class-name="row => row.row.idBusinessType == 66 ? 'pinkActive' : ''" max-height="250" size="mini" :data="tableDataList" style="width: 100%" v-loading="loading"
        @selection-change="tableChange">
        <el-table-column type="selection" :selectable="checkSelectable" width="55">
        </el-table-column>
        <el-table-column prop="Code" label="发票编号" width="120">
        </el-table-column>
        <el-table-column prop="BusType" label="销售类型" width="70">
        </el-table-column>
        <el-table-column prop="CusCode" label="客户编号" width="190">
        </el-table-column>
        <el-table-column prop="CusName" label="客户名称">
        </el-table-column>
        <el-table-column prop="MadeDate" label="发票日期" width="95">
        </el-table-column>
        <el-table-column prop="TaxAmount" label="含税金额合计" header-align="center" width="150" align="right">
          <template slot-scope="scope">
            <el-statistic group-separator="," :precision="2" :value="scope.row.TaxAmount"></el-statistic>
          </template>
        </el-table-column>
        <el-table-column prop="Remark" label="备注" width="120" class="eclip1" >
        </el-table-column>
      </el-table>
      <!-- total, sizes, prev, pager, next, jumper -->
      <el-pagination @size-change="aynchandleSizeChange" @current-change="aynchandleCurrentChange"
        :current-page="ayncPagination.page" :page-sizes="[25, 50, 100]" :page-size="25"
        style="text-align: right;margin-top: 5px;" layout="total,prev,pager,next,sizes" :total="ayncPagination.total">
      </el-pagination>
      <div slot="footer">
        <el-button @click="ayncVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleOk" :loading="loading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import moment from 'moment'

export default {
  data() {
    return {
      ayncTime: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
      kpTime: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
      ayncData: [],
      qryWord: '',
      loading: false,
      ayncVisible: false,
      selectionList: [],
      ayncPagination: {
        size: 25,
        page: 1,
        total: 0
      },
      selectTypeList: [
        
        {
          label: '待生成',
          value: 1
        },
        {
          label: '已生成',
          value: 0
        },
      ],
      selectType: 1,
    }
  },
  props: {},
  components: {},
  methods: {
    checkSelectable(row) {
      if (row.State == 0) { // 禁用不可选行
        return false
      } else {
        return true
      }
    },
    open() {
      this.ayncTime = [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
      this.ayncVisible = true
      this.serach()
    },
    serach() {
      this.ayncPagination.page = 1
      this.getayncCodeList()
    },
    getayncCodeList() {
      this.loading = true
      this.$http.post('/InvoiceManagement/Inv_InvoiceApplyMain/GetAccountSalesAllList', {
        // this.$http.post('/InvoiceManagement/ST_RDRecord/GetRdRecordByRoleList', {
        PageIndex: this.ayncPagination.page,
        PageRows: this.ayncPagination.size,
        // PageIndex: 1,
        //  PageRows: 1000000,
        Search: {
          RdrecordStartDate: this.ayncTime ? this.ayncTime[0] : '',
          RdrecordEndDate: this.ayncTime ? this.ayncTime[1] : '',
          InvoiceStartDate: this.kpTime ? this.kpTime[0] : '',
          InvoiceEndDate: this.kpTime ? this.kpTime[1] : '',
          KeyWord: this.qryWord,
          // State: this.selectType
        }
      }).then(res => {
        this.loading = false
        if (res.Success) {
          this.ayncData = res.Data
          // this.ayncPagination.total = this.ayncData.filter(item => item.State == this.selectType).length;
        } else {
          this.ayncData = []
          this.ayncPagination.total = 0
          this.$message.error(res.Msg)
        }
      })
    },
    aynchandleSizeChange(size) {
      this.ayncPagination.size = size
      // this.getayncCodeList()
    },
    aynchandleCurrentChange(page) {
      this.ayncPagination.page = page
      // this.getayncCodeList()
    },
    tableChange(arr) {
      this.selectionList = [...arr]
    },
    handleOk() {
      if (!this.selectionList.length) {
        return this.$message.warning('请选中后确定')
      }
      this.loading = true
      const arr = this.selectionList.map(item => {
        return item.Id
      })
      this.$http.post('/InvoiceManagement/ST_RDRecord/AddBillListDataBySelectInvoice', arr).then(res => {
        console.log(res)
        this.loading = false
        if (res.Success) {
          this.ayncVisible = false
          this.$emit('success')
          this.$message.Success(res.Data)
        } else {
          this.$message.error(res.Msg)
        }
      })

      console.log(this.selectionList)
    }
  },
  mounted() { },
  created() { },
  computed: {
    tableDataList(){
      this.ayncPagination.total = this.ayncData.filter(item => item.State == this.selectType).length;
      return (this.ayncData.filter(item => item.State == this.selectType)).slice((this.ayncPagination.page - 1) * this.ayncPagination.size, this.ayncPagination.page * this.ayncPagination.size);
    }
  },
  watch: {}
}
</script>
<style lang='less' scoped>
/deep/ .el-statistic .con .number {
  font-size: 12px;
  padding: 0;
}

/deep/ .el-statistic .con {
  justify-content: right;
}

/deep/ .ellipsis .cell {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
</style>
<style>
.pinkActive {
  background: pink !important; 
}
</style>